{% extends "correspondence/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/correspondence/css/index1.css">
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .list-one:hover {
            background: #F5F5F5;
        }
    </style>
{% endblock %}




{% block right_content %}
    <div style="width: 30%;height: 98%;display: inline-block;background: white;margin-top: 0.5%;margin-left: 0.6%;vertical-align: top;">
        <div style="width: 100%;height: 40px;">
            <div style="width: 15%;margin-top: 5px;padding-left: 10px;display: inline-block;vertical-align: top;">
                <button onclick="delete_email()" style="width: 70px;height: 30px;border: red solid 1px;border-radius: 3px;line-height: 28px;background: red;color: white;">删除</button>
            </div>
            <div style="width: 84%;margin-top: 5px;padding-left: 10px;display: inline-block;vertical-align: top;">
                <input id="search_data" type="text" style="width: 38%;height: 30px;border-radius: 3px;border: #cfcfcf solid 1px;padding-left: 5px;vertical-align: top;display: inline-block;" autocomplete="off">
                <input id="search_value" type="text" style="width: 38%;height: 30px;border-radius: 3px;border: #cfcfcf solid 1px;padding-left: 5px;vertical-align: top;display: inline-block;" autocomplete="off">
                <button onclick="search_input()" style="width: 70px;border-radius: 3px;border: #cfcfcf solid 1px;font-size: 14px;height: 30px;vertical-align: top;line-height: 28px;">查询</button>
            </div>
        </div>
        <div style="width: 100%;height: 35px;border-bottom: #cfcfcf solid 1px;padding-left: 10px;">
            <div style="width: 30px;height: 70px;display: inline-block;vertical-align: top;"><div style="height: 35px;width: 100%;line-height: 35px;text-align: center;"><input style="margin-top: 10px;" type="checkbox" id="choice_all" onclick="ChoiceOrNot()"></div></div>
            <div class="change-color add-change-color" onclick="change_tab('all')" id="all" style="height: 35px;line-height: 35px;">全部</div>
        </div>
        {#  邮件列表   #}
        <div id="excel_list" style="width: 100%;height: 85%;overflow: auto;">
            {% for foo in inbox_li %}
                <div class="list-one">
                    <div class="list-one-1">
                        <div class="list-one-1-1"><input style="margin-top: 10px;" type="checkbox" class="choice" data-value="{{ foo.deleted_id }}"></div>
                        <div id="{{ foo.message_id }}" class="list-one-1-2" style="display: none;"><i style="color: green" class="iconfont icon-xinjian1"></i></div>
                    </div>

                    <div class="list-one-2" style="color: #1c2838;" id="{{ foo.ids }}" onclick="window.open('send-message?message_id={{ foo.message_id }}','_self')">
                        <div class="list-one-2-1">
                            <div class="list-one-2-1-1">
                                <div title="{{ foo.title }}" class="list-one-2-1-1-1">{{ foo.title }}</div>
                            </div>
                            <div class="list-one-2-1-2" title="{{ foo.create_time }}">{{ foo.create_time }}</div>
                        </div>
                        <div class="list-one-2-2" title="{{ foo.plain_text }}">{{ foo.plain_text }}</div>
                    </div>

                </div>
            {% endfor %}
        </div>
        <hr>
        {#  分页   #}
        <div style="width: 100%;height: 50px;text-align: right;font-size: 13px;line-height: 50px;padding-right: 20px;">
            {% if cunt_page == 1 %}
                <span id="last_page" onclick="page_turning('{{ last_page }}')" style="cursor: pointer;display: none;">上一页</span>
            {% else %}
                <span id="last_page" onclick="page_turning('{{ last_page }}')" style="cursor: pointer;">上一页</span>
            {% endif %}

            <span id="cunt_page" style="margin-left: 10px;">{{ cunt_page }}</span> / <span id="page_number" style="margin-right: 10px;">{{ page_number }}</span>

            {% if cunt_page == page_number %}
                <span id="next_page" onclick="page_turning('{{ next_page }}')" style="cursor: pointer;display: none;">下一页</span>
            {% else %}
                <span id="next_page" onclick="page_turning('{{ next_page }}')" style="cursor: pointer;">下一页</span>
            {% endif %}

            <input id="input_page" type="text" style="width: 40px;height: 20px;display: inline-block;margin-left: 20px;border: #cfcfcf solid 1px;outline: none;border-radius: 3px;">

            <span onclick="page_turning('', jump=true)" style="margin-left: 10px;cursor: pointer;">跳转</span>
        </div>
    </div>

    <div style="width: 68.5%;height: 98%;display: inline-block;background: white;margin-top: 0.6%;vertical-align: top;">
        <div id="MessageDetail" style="height: 100%;width: 100%;overflow: auto;display: none;">
            <div style="width: 100%;padding-left: 2%;padding-right: 5%;">
                <table style="width: 100%;padding-right: 5%;">
                    <tr>
                        <td height="24" valign="middle" style="word-break:break-all;padding:9px 8px 2px 14px;"
                            class="txt_left settingtable readmail_subject">
                            <div class="qm_left" style="padding-bottom:3px;">
                                <h3 id="mail_title" class="sub_title " style="padding-left:14px;"></h3>
                            </div>
                            <div id="tagContainer" ck="tag" class="TagDiv TagReadmail"
                                 style="overflow:visible;margin-top:0;"></div>
                            <div class="clr"></div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left:14px;" class="settingtable txt_left">
                            <span class="addrtitle" style="padding-left:14px;">发&nbsp;&nbsp;件&nbsp;&nbsp;人：</span>
                            <span>
                               <span id="sender_name"></span>&lt;<span id="sender"></span>&gt;
                           </span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td style="padding-left:14px;" class="settingtable txt_left">
                            <span class="addrtitle" style="padding-left:14px;">发件时间：</span>
                            <span id="create_time">
                           </span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td style="padding-left:14px;" class="settingtable txt_left">
                            <span class="addrtitle" style="padding-left:14px;">收&nbsp;&nbsp;件&nbsp;&nbsp;人：</span>
                            <span>
                                投递成功 [<a id="click_count" href="javascript:void(0)" onclick="block_div()">查看详情</a>]
                           </span>&nbsp;
                        </td>
                    </tr>
                </table>

                <div id="sjr_table" style="width: 100%;height: 100px;overflow: auto;margin-left: 25px;border-top: #cfcfcf solid 1px;border-bottom: #cfcfcf solid 1px;display: none;">
                    <table style="width: 100%;border: #cfcfcf solid 1px;" id="sjr">
                        <tr style="width: 100%;">
                            <td style="width: 33%;border: #cfcfcf solid 1px;">收件人</td>
                            <td style="width: 33%;border: #cfcfcf solid 1px;">发送状态</td>
                            <td style="width: 33%;border: #cfcfcf solid 1px;">发送时间</td>
                        </tr>
                    </table>
                </div>


                <hr style="margin-top: 1%;">
            </div>


            <div style="margin-top: 3%;padding-left: 2%;padding-right: 5%;">
                <div id="message_content" style="margin-top: 3%;padding-left: 2%;padding-right: 5%;">
                </div>
                <hr style="margin-top: 3%;"/>
            </div>

            <br>
            <div id="file_div" style="width: 100%;padding-left: 2%;">
            </div>
        </div>
    </div>
{% endblock %}


{% block script %}
    <script type="text/javascript" src="../../static/public_file/other/jquery.js"></script>
    <script src="../../static/administrative/layDate-v5.0.9/laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script>
        window.onload = function () {
            document.getElementById("communication-drafts").className = "add_class";
            document.getElementById("correspondence").className = "add-nav-active";
        };

        lay('#version').html('-v' + laydate.v);

        //执行一个laydate实例
        laydate.render({
            elem: '#search_data', //指定元素
            type: 'date',
            format: 'yyyy-MM-dd'
        });

        function message_detail(message_id, ids) {
            document.getElementById("loading").style.display='inline-block';
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/correspondence/drafts.html", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("message_id="+String(message_id));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        document.getElementById("MessageDetail").style.display='inline-block';
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);

                        document.getElementById("sjr_table").style.display='none';
                        document.getElementById("click_count").innerText="查看详情";
                        document.getElementById("click_count").setAttribute("onclick", 'block_div()');

                        document.getElementById("mail_title").innerText=JsonDate["message_data"]["mail_title"];
                        document.getElementById("sender_name").innerText=JsonDate["message_data"]["sender_name"];
                        document.getElementById("sender").innerText=JsonDate["message_data"]["sender"];
                        document.getElementById("create_time").innerText=JsonDate["message_data"]["create_time"];
                        document.getElementById("message_content").innerHTML=JsonDate["message_data"]["message_content"];
                        console.log(JsonDate["message_data"]["message_content"])
                        var file_url = JsonDate["message_data"]["file_url"];
                        var create_time = JsonDate["message_data"]["create_time"];
                        var file_div = document.getElementById("file_div");
                        file_div.innerHTML="";
                        for (var i=0; i<file_url.length; i++){
                            var div_tag = document.createElement("div");
                            var div_tag_1 = document.createElement("div");div_tag_1.style.fontSize='14px';div_tag_1.style.display='inline-block';div_tag_1.style.verticalAlign='top';
                            if (file_url[i]["file_path"].split(".").slice(-1)[0] === "doc" || file_url[i]["file_path"].split(".").slice(-1)[0] === "docx"){
                                div_tag_1.innerHTML='<img src="../../static/correspondence/img/word%20(3).png" alt="" style="width: 50px;height: 50px;">';
                            }else if (file_url[i]["file_path"].split(".").slice(-1)[0] === "pdf" || file_url[i]["file_path"].split(".").slice(-1)[0] === "PDF"){
                                div_tag_1.innerHTML='<img src="../../static/correspondence/img/pdf.png" alt="" style="width: 50px;height: 50px;">';
                            }else if (file_url[i]["file_path"].split(".").slice(-1)[0] === "xls" || file_url[i]["file_path"].split(".").slice(-1)[0] === "xlsx"){
                                div_tag_1.innerHTML='<img src="../../static/correspondence/img/Excel写入-选中.png" alt="" style="width: 50px;height: 50px;">'
                            }else {
                                div_tag_1.innerHTML='<img src="../../static/correspondence/img/PNG%20(1).png" alt="" style="width: 50px;height: 50px;">'
                            }

                            var div_tag_2 = document.createElement("div");div_tag_2.style.fontSize='0';div_tag_2.style.display='inline-block';div_tag_2.style.verticalAlign='top';div_tag_2.style.marginLeft='10px';
                            var div_tag_3 = document.createElement("div");
                            if (file_url[i].hasOwnProperty("pdf_path")){
                                div_tag_3.innerHTML="<a style='font-size: 14px;' target='_blank' href='"+file_url[i]["pdf_path"]+"'>"+file_url[i]["file_name"]+"</a>";
                             }else {
                                div_tag_3.innerHTML="<a style='font-size: 14px;' href='"+file_url[i]["file_path"]+"'>"+file_url[i]["file_name"]+"</a>";
                             }
                            var div_tag_4 = document.createElement("div");
                            div_tag_4.innerHTML="<a style='font-size: 14px;color: #0000FF;' href='http://"+local_host+file_url[i]["download_path"]+"'>下载附件</a>";
                            div_tag_2.appendChild(div_tag_3);div_tag_2.appendChild(div_tag_4);
                            div_tag.appendChild(div_tag_1);div_tag.appendChild(div_tag_2);file_div.appendChild(div_tag);
                         }

                        var recipient_list = JsonDate["message_data"]["recipient_name"];
                        var sjr = document.getElementById("sjr");
                        sjr.innerHTML="";
                        for (var j=0; j<recipient_list.length; j++){
                            var tr = document.createElement("tr");tr.style.width="100%";
                            var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");
                            td.innerHTML=recipient_list[j];td.style.width='33%';td.style.border="#cfcfcf solid 1px";
                            td1.innerHTML="发送成功";td1.style.width='33%';td1.style.border="#cfcfcf solid 1px";
                            td2.innerHTML=create_time;td2.style.width='33%';td2.style.border="#cfcfcf solid 1px";
                            tr.appendChild(td);tr.appendChild(td1);tr.appendChild(td2);sjr.appendChild(tr);
                         }

                    }
                }
            };
        }

        function block_div() {
            document.getElementById("sjr_table").style.display='inline-block';
            document.getElementById("click_count").innerText="关闭";
            document.getElementById("click_count").setAttribute("onclick", 'none_div()');
        }

        function none_div() {
            document.getElementById("sjr_table").style.display='none';
            document.getElementById("click_count").innerText="查看详情";
            document.getElementById("click_count").setAttribute("onclick", 'block_div()');
        }

        function page_turning(page_number, jump=false, search_type='all') {
            if (jump) {
                page_number = document.getElementById("input_page").value
                if (parseInt(page_number) > parseInt(document.getElementById("page_number").innerText)){
                    alert("所输入页码超过总页数！请重新输入！")
                }
            }
            search_type = document.getElementsByClassName("change-color add-change-color")[0].id;
            document.getElementById("loading").style.display='inline-block';
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('get', "/correspondence/drafts.html?search=1&search_type="+search_type+"&page="+String(page_number), true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);

                        document.getElementById("cunt_page").innerText=JsonDate["data"]["cunt_page"];
                        document.getElementById("page_number").innerText=JsonDate["data"]["page_number"];

                        if (JsonDate["data"]["cunt_page"] === 1){
                            document.getElementById("last_page").style.display='none';
                        }else {
                            document.getElementById("last_page").style.display='inline-block';
                            document.getElementById("last_page").setAttribute("onclick", "page_turning('"+JsonDate["data"]["last_page"]+"')")
                        }
                        if (JsonDate["data"]["cunt_page"] === JsonDate["data"]["page_number"]) {
                            document.getElementById("next_page").style.display='none';
                        }else {
                            document.getElementById("next_page").style.display='inline-block';
                            document.getElementById("next_page").setAttribute("onclick", "page_turning('"+JsonDate["data"]["next_page"]+"')")
                        }
                        create_excel_list(JsonDate["data"]["inbox_li"]);
                    }
                }
            };
        }

        // 创建新的邮件列表
        function create_excel_list(Json_data) {
            var excel_list = document.getElementById("excel_list");
            excel_list.innerHTML="";
            for (var i=0; i<Json_data.length; i++) {
                var div = document.createElement("div");div.className='list-one';
                var div1 = document.createElement("div");div1.className="list-one-1";
                var div2 = document.createElement("div");div2.className="list-one-1-1";
                var inputcheck = document.createElement("input");inputcheck.type='checkbox';inputcheck.style.marginTop="10px";inputcheck.className='choice';inputcheck.setAttribute('data-value', Json_data[i]["deleted_id"]);
                div2.appendChild(inputcheck);
                var div3 = document.createElement("div");div3.id=Json_data[i]["message_id"];div3.className="list-one-1-2";div3.style.display="none";
                var i_tag = document.createElement("i");i_tag.style.color="green";i_tag.className="iconfont icon-youjian2";
                div3.appendChild(i_tag);div1.appendChild(div2);div1.appendChild(div3);

                var div4 = document.createElement("div");div4.id=Json_data[i]["ids"];div4.className="list-one-2";div4.style.color="#1c2838";
                div4.setAttribute("onclick", "window.open('send-message?message_id="+Json_data[i]["message_id"]+"','_self')");
                var div5 = document.createElement("div");div5.className="list-one-2-1";var div6 = document.createElement("div");div6.className="list-one-2-1-1";
                var div7 = document.createElement("div");div7.className="list-one-2-1-1-1";div7.title=Json_data[i]["title"];div7.innerText=Json_data[i]["title"];div6.appendChild(div7);
                var div8 = document.createElement("div");div8.className="list-one-2-1-2";div8.title=Json_data[i]["create_time"];div8.innerText=Json_data[i]["create_time"];
                div5.appendChild(div6);div5.appendChild(div8);
                var div9 = document.createElement("div");div9.className="list-one-2-2";div9.title=Json_data[i]["plain_text"];div9.innerText=Json_data[i]["plain_text"];
                div4.appendChild(div5);div4.appendChild(div9);
                div.appendChild(div1);div.appendChild(div4);excel_list.appendChild(div);
            }
        }

        // 全选
        function ChoiceOrNot() {
            var choice_list = document.getElementsByClassName("choice");
            if (document.getElementById("choice_all").checked){
                for (var i=0; i<choice_list.length; i++) {
                    choice_list[i].checked=true;
                }
            }else {
                for (var t=0; t<choice_list.length; t++) {
                    choice_list[t].checked=false;
                }
            }
        }

        // 删除邮件
        function delete_email() {
            var choice_list = document.getElementsByClassName("choice");
            var delete_list = [];
            for (var i=0; i<choice_list.length; i++) {
                if (choice_list[i].checked) {
                    delete_list.push(choice_list[i].dataset.value);
                }
            }
            var search_type = document.getElementsByClassName("change-color add-change-color")[0].id;
            document.getElementById("loading").style.display='inline-block';
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('get', "/correspondence/drafts.html?search=1&search_type="+search_type+"&delete_list="+JSON.stringify(delete_list), true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);

                        document.getElementById("choice_all").checked=false;

                        document.getElementById("cunt_page").innerText=JsonDate["data"]["cunt_page"];
                        document.getElementById("page_number").innerText=JsonDate["data"]["page_number"];

                        if (JsonDate["data"]["cunt_page"] === 1){
                            document.getElementById("last_page").style.display='none';
                        }else {
                            document.getElementById("last_page").style.display='inline-block';
                            document.getElementById("last_page").setAttribute("onclick", "page_turning('"+JsonDate["data"]["last_page"]+"')")
                        }
                        if (JsonDate["data"]["cunt_page"] === JsonDate["data"]["page_number"]) {
                            document.getElementById("next_page").style.display='none';
                        }else {
                            document.getElementById("next_page").style.display='inline-block';
                            document.getElementById("next_page").setAttribute("onclick", "page_turning('"+JsonDate["data"]["next_page"]+"')")
                        }
                        create_excel_list(JsonDate["data"]["inbox_li"]);
                    }
                }
            };
        }

        // 查询邮件
        function search_input() {
            var search_data = document.getElementById("search_data").value;             // 时间
            var search_value = document.getElementById("search_value").value;              // 查询值
            document.getElementById("loading").style.display='inline-block';
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('get', "/correspondence/drafts.html?search=1&search_data="+String(search_data)+"&search_value="+String(search_value), true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);

                        document.getElementById("choice_all").checked=false;

                        document.getElementById("cunt_page").innerText=JsonDate["data"]["cunt_page"];
                        document.getElementById("page_number").innerText=JsonDate["data"]["page_number"];

                        if (JsonDate["data"]["cunt_page"] === 1){
                            document.getElementById("last_page").style.display='none';
                        }else {
                            document.getElementById("last_page").style.display='inline-block';
                            document.getElementById("last_page").setAttribute("onclick", "page_turning('"+JsonDate["data"]["last_page"]+"')")
                        }
                        if (JsonDate["data"]["cunt_page"] === JsonDate["data"]["page_number"]) {
                            document.getElementById("next_page").style.display='none';
                        }else {
                            document.getElementById("next_page").style.display='inline-block';
                            document.getElementById("next_page").setAttribute("onclick", "page_turning('"+JsonDate["data"]["next_page"]+"')")
                        }
                        create_excel_list(JsonDate["data"]["inbox_li"]);
                    }
                }
            };
        }
    </script>
{% endblock %}
